<template>
  <div class="user-messages">
    <a-list
        class="message-list"
        :data-source="messages"
        :render-item="renderItem"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta
              :description="item.content"
          >
            <template #title>
              <a href="javascript:void(0)">{{ item.title }}</a>
            </template>
            <template #avatar>
              <a-avatar :style="{ backgroundColor: item.avatarColor }">
                {{ item.sender.charAt(0) }}
              </a-avatar>
            </template>
          </a-list-item-meta>
          <div>{{ item.time }}</div>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const messages = ref([
  {
    id: 1,
    title: '系统通知',
    content: '您的订单已发货，请注意查收。',
    sender: '系统',
    time: '2023-05-01 10:00:00',
    avatarColor: '#1890ff',
  },
  {
    id: 2,
    title: '交易提醒',
    content: '买家已确认收货，交易成功！',
    sender: '交易',
    time: '2023-04-30 14:30:00',
    avatarColor: '#52c41a',
  },
  {
    id: 3,
    title: '客服消息',
    content: '您的问题已得到解决，如有其他问题请随时联系我们。',
    sender: '客服',
    time: '2023-04-29 09:15:00',
    avatarColor: '#faad14',
  },
]);

const renderItem = ({ item }) => {
  return {
    title: item.title,
    description: item.content,
  };
};
</script>

<style scoped>
.message-list {
  background-color: #fff;
  padding: 24px;
  border-radius: 2px;
}
</style>

